import React from 'react';

import { Form, Descriptions, Row, Col, Button, Alert, Input } from 'antd';

import styles from './index.less'

import { PayCircleOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/es/form';

const layout = {
	labelCol: { span: 0 },
	wrapperCol: { span: 24 },
};

export default class Pay extends React.Component {
	formRef = React.createRef<FormInstance>();
	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
					<Descriptions title="订单支付" column={1}>
						<Descriptions.Item label="订单编号">09951</Descriptions.Item>
						<Descriptions.Item label="稿件标题">2021“凝心聚力·众志成城”全国微电影大赛征片启事</Descriptions.Item>
						<Descriptions.Item label="已购资源">Hangzhou, Zhejiang</Descriptions.Item>
						<Descriptions.Item label="订单金额">￥415.00</Descriptions.Item>
						<Descriptions.Item label="支付方式">
					     支付宝+余额
					    </Descriptions.Item>
					</Descriptions>

					<div className={styles.payBox}>
						
						<ul className={styles.payFlex}>
							<li className={styles.payItem}>
								<div className="title">订单金额</div>
								<div className={styles.content}>
									￥415
									<Button icon={<PayCircleOutlined />} type="dashed" danger size="small" style={{marginLeft: 10}}>
								      红包
								    </Button>
								</div>
							</li>
							<li className={styles.payItem}>
								<div className="title">账户余额</div>
								<div className={styles.content}>￥4.00</div>
							</li>
							<li className={styles.payItem}>
								<div className="title">还需支付</div>
								<div className={styles.content}>￥411</div>
							</li>
							<li className={styles.payItem} style={{textAlign: 'left'}}>
								<Button type="primary" danger style={{marginTop: 10}}>
							      充值
							    </Button>
							</li>
							<li className={styles.payItem}>
								<div style={{height: 10}}></div>
								<Form {...layout} ref={this.formRef} name="control-ref">
									<Form.Item name="note">
										<Row>
											<Col span={12}><Input style={{width: '100%'}} /></Col>
											<Col span={12} style={{textAlign: 'left'}}>
												<Button type="primary" danger>
													确认支付
												</Button>
											</Col>
										</Row>
										
									</Form.Item>
								</Form>
							</li>
						</ul>
					</div>
					<div style={{marginBottom: 10}}>
						<Alert message="支付订单为什么要输入支付密码？" type="info" showIcon />
						<p style={{marginTop: 5}}>为了保障用户资金安全，凡涉及到资金消费均需要输入支付密码进行二次身份效验。</p>
					</div>
					<div>
						<Alert message="我没有支付密码怎么操作？" type="info" showIcon />
						<p style={{marginTop: 5}}>请点击 <Button type="link" size="small">账户设置—安全设置</Button> 页面进行支付密码初始化设置。</p>
					</div>
			</div>
		)
	}
}